<template>
  <div class="el-full el-box-column">
    <el-tabs class="el-tabs-bg el-flex el-tabs-flex" value="delegate" @tab-click="loadAgent">
      <el-tab-pane class="el-flex el-box-column" label="由我委派" name="delegate">
        <el-form :inline="true" class="demo-form-inline" label-width="100px" @submit.native.prevent>
          <el-form-item label="">
            <el-input clearable v-model="textSearch" placeholder="请输入委派人姓名" style="width:240px;" @keyup.enter.native="delegateSearchTable" @clear="delegateSearchTable">
              <el-button slot="append" icon="el-icon-search" @click="delegateSearchTable"></el-button>
            </el-input>
            <el-button type="primary" @click="agentSearchDialog" style="margin-left: 10px;">
              高级查询
              <i class="el-icon-magic-stick"></i>
            </el-button>
          </el-form-item>
          <el-form-item style="float:right">
            <el-button type="primary" plain @click="addAgent">
              添加代理
              <i class="el-icon-plus"></i>
            </el-button>
          </el-form-item>
        </el-form>
        <div class="el-flex el-box-column">
          <el-table
            :data="myDelegateData"
            border
            stripe
            style="width: 100%"
            height="100%"
            ref="agentTable"
          >
            <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="agentToName" label="委派人"></el-table-column>
            <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="agentType" :formatter="row => agentTypeObj[row.agentType]" label="代理方式" align="center"></el-table-column>
            <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="startTime" label="生效时间" align="center"></el-table-column>
            <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="endTime" label="终止时间" align="center"></el-table-column>
            <el-table-column min-width="120px" sortable :show-overflow-tooltip="true" prop="agentStatus" :formatter="row => agentStatusObj[row.agentStatus]" label="代理关系状态"></el-table-column>
            <el-table-column min-width="100px" prop="control" align="center" label="操作" width="100" fixed="right">
              <template slot-scope="scope">
                <el-button class="td-btn-icon" type="text" title="编辑" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)"></el-button>
                <el-button class="td-btn-icon" type="text" title="删除" icon="el-icon-delete" @click="handleDelete(scope.$index, myDelegateData)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <el-pagination
          background
          @size-change="handleAgentSizeChange"
          @current-change="handleAgentCurrentChange"
          :current-page="currentAgentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageAgentSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalAgent">
        </el-pagination>
        <!-- 高级查询有我委托 -->
        <el-drawer
          title="高级查询"
          :before-close="handleAgentSearchClose"
          :visible.sync="dialogAgentSearchVisible"
          direction="rtl"
          custom-class="demo-drawer"
          ref="drawer"
          :wrapperClosable="true"
          :close-on-press-escape="false"
        >
          <div class="demo-drawer__content el-box-column" style="height: 100%; margin-left: 18px;">
            <el-form :model="agentSearchForm" ref="agentSearchForm" label-width="100px" class="el-flex">
              <el-form-item label="委派人:" prop="agentToName">
                <el-col :span="15">
                  <el-input placeholder="请输入委派人" v-model="agentSearchForm.agentToName" auto-complete="off"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item
                label="代理方式:"
                prop="agentType"
              >
                <el-radio-group v-model="agentSearchForm.agentType">
                  <el-radio border label="ALL">完全代理</el-radio>
                  <el-radio border label="PART">部分代理</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="代理关系状态:" prop="agentStatus">
                <el-radio-group v-model="agentSearchForm.agentStatus">
                  <el-radio border label="">全部</el-radio>
                  <el-radio border label="Y">生效</el-radio>
                  <el-radio border label="N">不生效</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <div class="demo-drawer__footer" style="text-align: right; margin-bottom: 10px; padding-right:10px;">
              <el-button type="primary" @click="dialogAgentSearchSure">
                确定
                <i class="el-icon-document-checked el-icon--right"></i>
              </el-button>
              <el-button @click="dialogAgentSearchReset">
                重置
                <i class="el-icon-refresh-left"></i>
              </el-button>
            </div>
          </div>
        </el-drawer>
      </el-tab-pane>
      <el-tab-pane class="el-flex el-box-column" label="由我代理" name="theAgent" lazy>
        <el-form :inline="true" class="demo-form-inline" @submit.native.prevent>
          <el-form-item label="">
            <el-input clearable v-model="deleSearch" placeholder="请输入代理人姓名" style="width:240px;" @keyup.enter.native="agentSearchTable" @clear="agentSearchTable">
              <el-button slot="append" icon="el-icon-search" @click="agentSearchTable"></el-button>
            </el-input>
            <el-button type="primary" @click="delegateSearchDialog" style="margin-left: 10px;">
              高级查询
              <i class="el-icon-magic-stick"></i>
            </el-button>
          </el-form-item>
        </el-form>
        <div class="el-flex el-box-column">
          <el-table
            :data="myProxyData"
            border
            stripe
            style="width: 100%"
            height="100%"
            ref="agentTable"
          >
            <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="agentFromName" label="代理人"></el-table-column>
            <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="agentType" :formatter="row => agentTypeObj[row.agentType]" label="代理方式" align="center"></el-table-column>
            <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="startTime" label="生效时间" align="center"></el-table-column>
            <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="endTime" label="终止时间" align="center"></el-table-column>
            <el-table-column min-width="120px" sortable :show-overflow-tooltip="true" prop="agentStatus" :formatter="row => agentStatusObj[row.agentStatus]" label="代理关系状态"></el-table-column>
            <el-table-column min-width="100px" prop="control" align="center" label="操作" width="100" fixed="right">
              <template slot-scope="scope">
                <el-button class="td-btn-icon" type="text" icon="el-icon-view" title="预览" @click="handleView(scope.$index, scope.row)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <el-pagination
          background
          @size-change="handleTheagentSizeChange"
          @current-change="handleTheagentCurrentChange"
          :current-page="currentTheagentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageTheagentSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalTheagent">
        </el-pagination>
        <!-- 高级查询有我代理 -->
        <el-drawer
          title="高级查询"
          :before-close="handleDelegateSearchClose"
          :visible.sync="dialogDelegateSearchVisible"
          direction="rtl"
          custom-class="demo-drawer"
          ref="drawer"
          :wrapperClosable="true"
          :close-on-press-escape="false"
        >
          <div class="demo-drawer__content el-box-column" style="height: 100%; margin-left: 18px;">
            <el-form :model="delegateSearchForm" ref="delegateSearchForm" label-width="100px" class="el-flex">
              <el-form-item label="代理人:" prop="agentFromName">
                <el-col :span="15">
                  <el-input placeholder="请输入代理人" v-model="delegateSearchForm.agentFromName"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item
                label="代理方式:"
                prop="agentType"
              >
                <el-radio-group v-model="delegateSearchForm.agentType">
                  <el-radio border label="ALL">完全代理</el-radio>
                  <el-radio border label="PART">部分代理</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="代理关系状态:" prop="agentStatus">
                <el-radio-group v-model="delegateSearchForm.agentStatus">
                  <el-radio border label="">全部</el-radio>
                  <el-radio border label="Y">生效</el-radio>
                  <el-radio border label="N">不生效</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <div class="demo-drawer__footer" style="text-align: right; margin-bottom: 10px; padding-right:10px;">
              <el-button type="primary" @click="dialogDelegateSearchSure">
                确定
                <i class="el-icon-document-checked el-icon--right"></i>
              </el-button>
              <el-button @click="dialogDelegateSearchReset">
                重置
                <i class="el-icon-refresh-left"></i>
              </el-button>
            </div>
          </div>
        </el-drawer>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { Tree, Dialog, Table, TableColumn, Pagination, MessageBox, Message, Drawer, Tabs, TabPane } from 'element-ui'
import { proxyAuthorization, workFlowProxyDelete } from '@/api/workflow/holidayRules/holidayRules.js'
export default {
  name: 'holidayRules',
  components: {
    'el-tree': Tree, // 树形菜单
		'el-dialog': Dialog, // 对话框
		'el-table': Table, // 表格
		'el-table-column': TableColumn, // 表格列
		'el-pagination': Pagination, // 分页
    'el-drawer': Drawer, // 抽屉
    'el-tabs': Tabs, // 标签页
    'el-tab-pane': TabPane // 标签页列
  },
  data() {
    return {
      formInline: {},
      totalTheagent: 0, // 总条数
      totalAgent: 0, // 总条数
      total: 50, // 分页总条数
      pageAgentSize: 20, // 显示页数
      pageTheagentSize: 20, // 显示页数
      currentAgentPage: 1, // 当前展示页
      currentTheagentPage: 1, // 当前展示页
      agentTypeObj: {
        ALL: '完全代理',
        PART: '部分代理',
      },
      agentStatusObj: {
        Y: '生效',
        N: '不生效',
      },
      myDelegateData: [], // 有我委派列表数据
      myProxyData: [], // 由我代理关系列表数据
      agentStatus: '', // 当前请求的代理关系状态
      delegateData: [
      {
        agentToName: '委托人',
        agentToList: '代理人',
        agentType: 'ALL',
        startTime: '2019-08-08',
        endTime: '2019-08-08',
        agentStatus: '生效',
        agentReason: "请假原因"
      },
      {
        agentToName: '委托人',
        agentToList: '代理人',
        agentType: 'PART',
        startTime: '2019-08-08',
        endTime: '2019-08-08',
        agentStatus: '生效',
        agentReason: "请假原因"
      }
    ],
    dialogDelegateSearchVisible: false, // 有我代理高级查询弹框是否显示值
    delegateSearchForm: {}, //  有我代理高级查询表单model
    dialogAgentSearchVisible: false, // // 有我委托高级查询弹框是否显示值
    agentSearchForm: {}, //  有我委托高级查询表单model
    searchData: '', // 存储由我代理搜索来的数据
    textSearch: '', // 由我代理模糊搜索model值
    deleSearchData: '', // 存储由我委派搜索来的数据
    deleSearch: '' // 由我委派模糊搜索model值
    }
  },
  created() {
    this.myDelegateTable(this.currentAgentPage, this.pageAgentSize) // 有我委派列表数据
    // this.myProxyTable(this.currentTheagentPage, this.pageTheagentSize) // 由我代理关系列表数据
    window.onresize = () => {
      this.$refs.agentTable.doLayout() //监听窗口变化，重绘表格布局
    }
  },
  // watch: {
    // 监听代理用户状态关系的变化触发表格数据变化
  //   agentStatus: {
  //     immediate: true,
  //     handler (newVal) {
  //       this.currentAgentPage = 1
  //       this.myDelegateTable(this.currentAgentPage, this.pageAgentSize)
  //     },
  //   }
  // },
  methods: {
    // 切换选项卡时,刷新表格
    loadAgent (obj) {
      if (obj.name == "delegate") {
        this.myDelegateTable(this.currentAgentPage, this.pageAgentSize) // 有我委派列表数据
      } else if (obj.name == "theAgent") {
        this.myProxyTable(this.currentTheagentPage, this.pageTheagentSize) // 由我代理关系列表数据
      }
    },
    // 有我委派列表数据
    myDelegateTable (page, size, params = { }) {
      proxyAuthorization(page, size, {
        queryType: '1',
        category: 2
      }).then(res => {
        // console.log(res)
        this.myDelegateData = res.data.data.records
        this.totalAgent = res.data.data.total
        setTimeout(() => {
          this.$refs.agentTable.doLayout() // 重绘表格宽度，解决表头对不齐的问题
        }, 0)
      })
    },
    // 由我代理关系列表数据
    myProxyTable (page, size, params = { }) {
      proxyAuthorization(page, size, {
        queryType: '1',
        category: 1
      }).then(res => {
        console.log(res)
        this.myProxyData = res.data.data.records
        this.totalTheagent = res.data.data.total
        setTimeout(() => {
          this.$refs.agentTable.doLayout() // 重绘表格宽度，解决表头对不齐的问题
        }, 0)
      })
    },
    // 由我委派模糊查询
    delegateSearchTable () {
      if (this.textSearch) { // 有数据,是要搜索
				this.searchData = this.textSearch
				this.myDelegateTable(this.currentAgentPage, this.pageAgentSize, { textSearch: this.searchData })
			} else { // 搜索输入框是空的,说明是要重置,不搜索了,展示正常的全部数据
				this.searchData = ''
				this.myDelegateTable(this.currentAgentPage, this.pageAgentSize)
			}
    },
    // 由我代理模糊查询
    agentSearchTable () {
      if (this.deleSearch) { // 有数据,是要搜索
				this.deleSearchData = this.deleSearch
				this.myProxyTable(this.currentTheagentPage, this.pageTheagentSize, { deleSearch: this.deleSearchData })
			} else { // 搜索输入框是空的,说明是要重置,不搜索了,展示正常的全部数据
				this.deleSearchData = ''
				this.myProxyTable(this.currentTheagentPage, this.pageTheagentSize)
			}
    },
    // 由我委托列表里的每条页数
    handleAgentSizeChange (val) {
      this.pageAgentSize = val
      this.myDelegateTable(this.currentAgentPage, this.pageAgentSize, { textSearch: this.searchData })
    },
    // 由我委托当前页
    handleAgentCurrentChange (val) {
      this.currentAgentPage = val
      if (this.searchData) {
        this.myDelegateTable(this.currentAgentPage, this.pageAgentSize)
      } else if (this.dialogAgentSearchVisible) {
        this.myDelegateTable(this.currentAgentPage, this.pageAgentSize, this.agentSearchForm)
      } else {
        this.myDelegateTable(this.currentAgentPage, this.pageAgentSize)
      }
    },
    // 添加代理
    addAgent() {
      // let dynamicRouting = [{
      //   path: '/',
      //   component: this.pageLayout,
      //   meta: {
      //     title: '工作流演示'
      //   },
      //   children: [
      //     {
      //       path: 'addHolidayRules',
      //       name: 'addHolidayRules',
      //       component: () => import('@/views/workflow/holidayRules/addHolidayRules'),
      //       meta: {
      //         title: '假期规则'
      //       }
      //     }
      //   ],
      // }]
      // this.$router.addRoutes(dynamicRouting)
      // this.$router.push({
      //   name: 'addHolidayRules'
      //   // params: {
      //   //   userGroupId: row.userGroupId
      //   // }
      // })
      // this.multiRouters是全局提供的自动添加多级路由的方法
      this.$router.addRoutes(this.multiRouters([{
        path: 'addHolidayRules',
        name: 'addHolidayRules',
        component: () => import('@/views/workflow/holidayRules/addHolidayRules'),
        meta: {
          title: '假期规则'
        }
      }]))
      this.$router.push(this.routerMatch({
        name: 'addHolidayRules'
      }))
    },
    // 编辑事件
    handleEdit (index, row) {
      // let dynamicRouting = [{
      //   path: '/',
      //   component: this.pageLayout,
      //   meta: {
      //     title: '工作流演示'
      //   },
      //   children: [
      //     {
      //       path: 'editHolidayRules',
      //       name: 'editHolidayRules',
      //       component: () => import('@/views/workflow/holidayRules/editHolidayRules'),
      //       meta: {
      //         title: '假期规则'
      //       }
      //     }
      //   ],
      // }]
      // this.$router.addRoutes(dynamicRouting)
      // this.$router.push({
      //   name: 'editHolidayRules',
      //   params: {
      //     formInline: JSON.parse(JSON.stringify(row))
      //   }
      // })
      // this.multiRouters是全局提供的自动添加多级路由的方法
      this.$router.addRoutes(this.multiRouters([{
        path: 'editHolidayRules',
        name: 'editHolidayRules',
        component: () => import('@/views/workflow/holidayRules/editHolidayRules'),
        meta: {
          title: '假期规则'
        }
      }]))
      this.$router.push(this.routerMatch({
        name: 'editHolidayRules',
        params: {
          // formInline: JSON.parse(JSON.stringify(row))
          agentId: row.agentId
        }
      }))
    },
    // 查看事件
    handleView (index, row) {
      // let dynamicRouting = [{
      //   path: '/',
      //   component: this.pageLayout,
      //   meta: {
      //     title: '工作流演示'
      //   },
      //   children: [
      //     {
      //       path: 'viewHolidayRules',
      //       name: 'viewHolidayRules',
      //       component: () => import('@/views/workflow/holidayRules/viewHolidayRules'),
      //       meta: {
      //         title: '假期规则'
      //       }
      //     }
      //   ],
      // }]
      // this.$router.addRoutes(dynamicRouting)
      // this.$router.push({
      //   name: 'viewHolidayRules',
      //   params: {
      //     formInline: JSON.parse(JSON.stringify(row))
      //   }
      // })
      // this.multiRouters是全局提供的自动添加多级路由的方法
      this.$router.addRoutes(this.multiRouters([{
        path: 'viewHolidayRules',
        name: 'viewHolidayRules',
        component: () => import('@/views/workflow/holidayRules/viewHolidayRules'),
        meta: {
          title: '假期规则'
        }
      }]))
      this.$router.push(this.routerMatch({
        name: 'viewHolidayRules',
        params: {
          formInline: JSON.parse(JSON.stringify(row))
        }
      }))
    },
    // 删除事件
    handleDelete (index, data) {
      MessageBox.confirm('是否确定要删除该行数据?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          let agentId = data[index].agentId
          workFlowProxyDelete(agentId).then(res => {
            if (res.data.code === 10000) {
              Message.success('删除成功')
              this.myDelegateTable(this.currentAgentPage, this.pageAgentSize)
            }
          })
        })
        .catch(() => {})
    },
    // 由我代理每页条数
    handleTheagentSizeChange (val) {
      this.pageTheagentSize = val
      this.myProxyTable(this.currentTheagentPage, this.pageTheagentSize)
    },
    // 由我代理当前页数
    handleTheagentCurrentChange (val) {
      this.currentTheagentPage = val
      if (this.deleSearchData) {
        this.myProxyTable(this.currentTheagentPage, this.pageTheagentSize)
      } else if (this.dialogDelegateSearchVisible) {
        this.myProxyTable(this.currentTheagentPage, this.pageTheagentSize, this.delegateSearchForm)
      } else {
        this.myDelegateTable(this.currentAgentPage, this.pageAgentSize)
      }
    },
    // 点击有我委托高级查询弹框显示
    agentSearchDialog () {
      this.dialogAgentSearchVisible = true
    },
    // 有我委托高级查询弹框关闭事件
    handleAgentSearchClose () {
      this.dialogAgentSearchVisible = false
    },
    // 有我委托高级查询弹框点击确定事件
    dialogAgentSearchSure () {
      this.myDelegateTable(this.currentAgentPage, this.pageAgentSize, this.agentSearchForm)
      this.handleAgentSearchClose()
    },
    // 有我委托高级查询弹框点击重置事件
    dialogAgentSearchReset () {
      this.$refs.agentSearchForm.resetFields()
      this.dialogAgentSearchVisible = false
      this.myDelegateTable(this.currentAgentPage, this.pageAgentSize, this.agentSearchForm)
    },

    // 点击有我代理高级查询弹框显示
    delegateSearchDialog () {
      this.dialogDelegateSearchVisible = true
    },
    // 有我代理高级查询弹框关闭事件
    handleDelegateSearchClose () {
      this.dialogDelegateSearchVisible = false
    },
    // 有我代理高级查询弹框点击确定事件
    dialogDelegateSearchSure () {
      this.myProxyTable(this.currentTheagentPage, this.pageTheagentSize, this.delegateSearchForm)
      this.handleDelegateSearchClose()
    },
    // 有我代理高级查询弹框点击重置事件
    dialogDelegateSearchReset () {
      this.$refs.delegateSearchForm.resetFields()
      this.dialogDelegateSearchVisible = false
      this.myProxyTable(this.currentTheagentPage, this.pageTheagentSize, this.delegateSearchForm)
    }
  }
};
</script>
<style lang="scss"></style>
